iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 2
0
Modern Web

VUE & PHP (Apache2) & Docker 實戰開發系列 第 2

Day2-Vue & Service Worker(PWA)

  • 分享至 

  • xImage
  •  

近期開發專案的時後,發現前端的世界相較於後端好像越來越好玩,
但也就比較難搞一點,常常小問題就會卡很久,
不過看到自已的前端專案效能變的更好,成就感還是很好的。
目前最紅的應該就是Progressive Web App這個新概念,
所以今天想要推薦的就是Service Worker,細節可以參考這篇

Service Worker可以讓你的前端用起來就像是一個app一樣
稍微列了幾個特色如下:

  1. 適應任何環境:桌面電腦,智能手機,筆記本電腦,或者其他設備
  2. 通過 service workers 可以在離線或者網速極差的環境下工作
  3. service worker 有更新事件的註冊,應用能夠始終保持更新
  4. 只能通過 HTTPS 或 Localhost 來提供服務,防止內容不被篡改
  5. 針對一些browser上的環境變動,主動偵測,並可以簡單做到推播服務

今天主要希望可以帶到這個主題,並利用vue實作

vue的相關安裝就不多說明了,其實官網寫的非常詳細。
vue也有提供了樣本可以讓我們直接建立一個pwa的專案。
vue init pwa(樣本) vue-pwa(專案名稱)
但其實我會比較喜歡用vue create myproject的方式,手動安裝的模式https://ithelp.ithome.com.tw/upload/images/20181015/201088469i0v2igIm6.png
https://ithelp.ithome.com.tw/upload/images/20181015/20108846Y1GhpnkvQz.png
如上圖,我一定會選用typescript的方式來進行專案開發,好閱讀又好維護。
專案建立完成應該會像第二張圖 (覺得現在的開發人員越來越幸福了)
大家已經可以看到,專案除了基本架構配置,service worker也已經搞定了,
只留了接口讓我們進行事件中的實作部份。

service worker因為安全性問題,只有localhost、https
才能夠被啟用,所以http的dns是看不到service worker的配置
所以你可以在本機直接啟你的專案並開啟開發人員模式查看,如下圖https://ithelp.ithome.com.tw/upload/images/20181016/20108846kudHYTgl6X.png

為了讓專案可以專心的做開發,一開始的專案有沒有配置好真的很重要,
不然當專案寫到後期在來處理,就要在花更多的時間去處理,
更不用說常常因此需要調整程式碼的時後,非常的痛苦,
所以非常推薦大家在新的專案,也把service worker這個強大的功能加入,
在搭配webpack,相信純前端的專案執行速度是可以在天上飛的(誇張)。


上一篇
Day1-VUE & PHP (Apache2) -開發工具介紹
下一篇
Day3 - PHP開發框架安裝-Laravel
系列文
VUE & PHP (Apache2) & Docker 實戰開發30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言